<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文件管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>

		<div class="layui-layout layui-layout-admin">
			<table class="layui-container" id="file" lay-filter="file"></table>
			<div class="layui-form-item" style="display: none;">
				<label class="layui-form-label">sftpId</label>
				<div class="layui-input-inline">
					<input type="text" id="sftpId" class="layui-input">
				</div>
			</div>

		</div>

		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="reload">重载数据</button>
			</div>
		</script>



		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			<a class="layui-btn layui-btn-xs" lay-event="upload">上传</a>
			<a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
		</script>

		<script src="layui/jquery-3.6.0.min.js"></script>
		<script src="layui/layui.js" charset="utf-8"></script>

		<script>
			layui.config({
				base: 'js/', //静态资源所在路径
			}).extend({
				index: 'http', //主入口模块
			}).use(['table', 'dropdown', 'jquery', 'http', 'form'], function() {
				var table = layui.table;
				var dropdown = layui.dropdown;
				var $ = layui.jquery;
				var api = layui.http.api;
				var form = layui.form;


				// 创建渲染实例
				table.render({
					elem: '#file',
					url: api + 'file/getAllFile' // 此处为静态模拟数据，实际使用时需换成真实接口
						,
					toolbar: '#toolbarDemo',
					defaultToolbar: ['filter', 'exports', 'print', {
						title: '帮助',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips'
					}],
					height: 'full' // 最大高度减去其他容器已占有的高度差
						,
					cellMinWidth: 80,
					page: true,
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'fileName',
							fixed: 'left',
							width: 150,
							title: '文件名',
							sort: true
						}, {
							field: 'path',
							width: 200,
							title: '路径'
						}, {
							field: 'size',
							title: '大小',
							width: 100
						}, {
							field: 'createTime',
							width: 180,
							title: '创建时间',
							sort: true
						}, {
							field: 'lastUpdateTime',
							width: 180,
							title: '最后修改时间',
							sort: true
						}, {
							fixed: 'right',
							title: '操作',
							width: 200,
							toolbar: '#barDemo'
						}]
					],
					done: function() {
						var id = this.id;
					}
				});

				table.on('toolbar(demo)', function(obj) {

				});


				// 工具栏事件
				table.on('toolbar(file)', function(obj) {
					var id = obj.config.id;
					var checkStatus = table.checkStatus(id);
					var othis = lay(this);
					switch (obj.event) {
						case 'getCheckData':
							var data = checkStatus.data;
							layer.alert(layui.util.escape(JSON.stringify(data)));
							break;
						case 'reload':
							table.reload('file', {});
							break;
						case 'getData':
							var getData = table.getData(id);
							console.log(getData);
							layer.alert(layui.util.escape(JSON.stringify(getData)));
							break;
							layer.full(index);
							break;
						case 'LAYTABLE_TIPS':
							layer.alert('Table for layui-v' + layui.v);
							break;
					};
				});

				//触发单元格工具事件
				table.on('tool(file)', function(obj) { // 双击 toolDouble
					var data = obj.data;
					if (obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							$.ajax({
								type: 'POST',
								url: api + 'file/deleteFile',
								data: {
									'fileName': obj.data['fileName'],
									'path': obj.data['path']
								},
								dataType: 'json',
								success: function(result) {
									if (result.code == 0) {
										layer.msg('删除成功');
									} else {
										layer.msg('删除失败');
									}
								},
								error: function(result) {
									layer.msg(result.msg);
								}
							})
							obj.del();
							layer.close(index);
						});
					} else if (obj.event === 'upload') {
						layer.open({
							title: '选择上传的sftp',
							type: 2,
							area: ['400px', '300px'],
							content: 'sftpSel.html',
							end: function() {
								let sftpId = $('#sftpId').val();
								$.ajax({
									type: 'POST',
									url: api + 'upload',
									data: {
										'sftpId': sftpId,
										'data': JSON.stringify(data)
									},
									dataType: 'json',
									success: function(result) {
										if (result.code == 0) {
											layer.msg('上传成功');
										} else {
											layer.msg('上传失败');
										}
									},
									error: function(result) {
										layer.msg(result.msg);
									}
								})

							}
						});
					} else if (obj.event === 'download') {
						let filePath = obj.data['path']
						let fileName = obj.data['fileName']
						window.open(api + "downloadLocal?fileName=" + encodeURI(fileName) + "&path=" + filePath);

					}
				});

			});
		</script>

	</body>
</html>
